<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>通知设置</title>
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css?v=2.8.12"/>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css"/>
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">

        <div class="layui-tab layui-tab-brief" lay-filter="tab-notify-hash">
            <ul class="layui-tab-title" id="support_list">
                <li lay-id="<?=$notify_iyuu?>" class="layui-this">爱语飞飞</li>
                <li lay-id="<?=$notify_server_chan?>">Server酱</li>
                <li lay-id="<?=$notify_bark?>">Bark</li>
                <li lay-id="<?=$notify_qy_weixin?>">企业微信机器人</li>
            </ul>
            <div class="layui-tab-content">

                <!-- 爱语飞飞 -->
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" lay-filter="<?=$notify_iyuu?>">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">token</label>
                            <div class="layui-input-block">
                                <input type="password" name="token" required lay-verify="required"
                                       placeholder="请输入爱语飞飞token" autocomplete="off" class="layui-input" lay-affix="eye">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
                                        lay-filter="save_<?=$notify_iyuu?>">
                                    提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Server酱 -->
                <div class="layui-tab-item">
                    <form class="layui-form" lay-filter="<?=$notify_server_chan?>">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">key</label>
                            <div class="layui-input-block">
                                <input type="password" name="key" required lay-verify="required"
                                       placeholder="请输入Server酱的key" autocomplete="off" class="layui-input" lay-affix="eye">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
                                        lay-filter="save_<?=$notify_server_chan?>">
                                    提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Bark -->
                <div class="layui-tab-item">
                    <form class="layui-form" lay-filter="<?=$notify_bark?>">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">服务器</label>
                            <div class="layui-input-block">
                                <input type="text" name="server" required lay-verify="required"
                                       placeholder="请输入服务器HOST" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label required">device_key</label>
                            <div class="layui-input-block">
                                <input type="password" name="device_key" required lay-verify="required"
                                       placeholder="请输入device_key" autocomplete="off" class="layui-input" lay-affix="eye">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">通知分组</label>
                            <div class="layui-input-block">
                                <input type="text" name="group" placeholder="请输入通知分组" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
                                        lay-filter="save_<?=$notify_bark?>">
                                    提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 企业微信机器人 -->
                <div class="layui-tab-item">
                    <form class="layui-form" lay-filter="<?=$notify_qy_weixin?>">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">机器人URL</label>
                            <div class="layui-input-block">
                                <input type="text" name="url" required lay-verify="required|url"
                                       placeholder="请输入企业微信机器人URL" lay-reqtext="机器人URL格式错误" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit=""
                                        lay-filter="save_<?=$notify_qy_weixin?>">
                                    提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>

    </div>
</div>

<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>
<script>

    // 相关常量
    const PRIMARY_KEY = "PRIMARY_KEY";
    const UPDATE_API = "/admin/notify/save";
    const GET_API = '/admin/notify/get';
    const SUPPORT_LIST = <?=$support_list?>;

    /**
     * 初始化表单
     */
    layui.use(["form", "element"], function () {
        let form = layui.form;
        let $ = layui.$;
        let element = layui.element;

        /**
         * 初始化指定的表单值
         * @param {string} name
         */
        function init_form_filter(name) {
            $.ajax({
                url: GET_API+ "?name=" + name,
                dataType: "json",
                success: function (res) {
                    if (res.code) {
                        return layui.popup.failure(res.msg);
                    }
                    form.val(name, res.data);
                }
            });
        }

        // 初始值
        let self_tab = document.getElementById('support_list').getElementsByClassName('layui-this');
        if (typeof self_tab[0] !== "undefined") {
            init_form_filter(self_tab[0].getAttribute('lay-id'));
        }

        // tab 切换事件
        element.on('tab(tab-notify-hash)', function (data) {
            console.log(this); // 当前 tab 标题所在的原始 DOM 元素
            console.log(data.index); // 得到当前 tab 项的所在下标
            console.log(data.elem); // 得到当前的 tab 容器
            init_form_filter(this.getAttribute('lay-id'));
        });
    });

    /**
     * 提交表单
     */
    layui.use(["form", "layer", "popup"], function () {
        let $ = layui.$;
        let form = layui.form;

        layui.form.verify({
            phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"],
            email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
            url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
            number: [/(^$)|^\d+$/, '只能填写数字'],
            date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
            identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
        });

        layui.each(SUPPORT_LIST, function (k, name) {
            form.on("submit(save_" + name + ")", function (data) {
                data.field[PRIMARY_KEY] = name;
                $.ajax({
                    url: UPDATE_API,
                    dataType: "json",
                    type: "POST",
                    data: data.field,
                    success: function (res) {
                        if (res.code) {
                            return layui.popup.failure(res.msg);
                        }
                        return layui.popup.success("操作成功");
                    }
                });
                return false;
            });
        });
    });

</script>

</body>
</html>
